import React, { useEffect, useState } from 'react'
import { Table, Button, Modal, Tree  } from 'antd';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
const { confirm } = Modal;
export default function Rightlist() {
  const [dataSource, setDataSource] = useState([])
  const [treeData, setTreeData] = useState([])
  useEffect(() => {
    axios.get('http://localhost:8000/roles').then(res => {
      console.log(res)
      setDataSource(res.data)
    })
    this.getTreeList()
  }, [])
  const getTreeList=()=>{
    axios.get('http://localhost:8000/right?_embed=children').then(res => {
      // res.data.forEach(element => {
      //   if (element.children?.length == 0) {
      //     element.children = ""
      //   }
      // });
      // this.setState({
      //   dataSource: res.data
      // })
      setTreeData(res.data)
    })
  }
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'roleName',
    },
    {
      title: "操作",
      render: (key) => {
        return <div>
          <Button type="danger" shape="circle" onClick={() => { showConfirm(key) }} icon={<DeleteOutlined />} />
          <Button type="primary" shape="circle" icon={<EditOutlined onClick={showModal} />} />
        </div>
      }
    }
  ]
  const showConfirm = (item) => {
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        detaMethod(item)
      },
      onCancel() {
        // console.log('Cancel');
      },
    });
  }
  
    // 删除 当前页面同步状态 + 后端同步
   const detaMethod=(item)=> {

      let newdata = []
      newdata = dataSource.filter(data => data.id !== item.id)
      axios.delete(`http://localhost:8000/roles/${item.id}`).then(res => {
        // console.log(res)
      })
      setDataSource([...newdata])
    }
    const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    console.log("展示modla")
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const onSelect = (selectedKeys: React.Key[], info: any) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck = (checkedKeys: React.Key[], info: any) => {
    console.log('onCheck', checkedKeys, info);
  };
  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{ pageSize: 5 }}
        rowKey={(item) => item.id}
        
      />;
        <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Tree
          checkable
          // defaultExpandedKeys={['0-0-0', '0-0-1']}
          // defaultSelectedKeys={['0-0-0', '0-0-1']}
          // defaultCheckedKeys={['0-0-0', '0-0-1']}
          onSelect={onSelect}
          onCheck={onCheck}
          treeData={treeData}
        />
      </Modal>
    </div>
  )
}
